<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns:jsp="http://java.sun.com/JSP/Page"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:ch="http://sourceforge.net/projects/jsf-comp"
  xmlns:fn="http://java.sun.com/jsp/jstl/functions"	
  xmlns:t="http://myfaces.apache.org/tomahawk"
  xmlns:p="http://primefaces.org/ui">
  
    <ui:composition template="/template/pPrincipal.xhtml">
		<ui:define name="head">
			<title>Asesor 360</title>
		</ui:define>
		<ui:define name="titulopagina">
			<h:outputText value="GESTIÓN DE SALDOS" />
		</ui:define>
		
		<ui:define name="agregaIconoEjecutivos"/>
		
		<ui:define name="bodyarea">
			<f:event type="preRenderView" listener="#{gestionSaldosController.onPageLoad}"/>
			<p:messages id="messageSaldos" showDetail="true" closable="true" />
			<p:tabView id="tabViewSaldos">
				<p:ajax event="tabChange" listener="#{gestionSaldosController.onTabChange}" />
				<p:tab id="tabSaldoAnual" title="Saldos Anual">
					<h:panelGrid headerClass="cabeceraPanelSimple" cellspacing="0" cellpadding="5"
						styleClass="bordePanel" columns="1" width="99%" style="margin-bottom:5px">
						<f:facet name="header">  
							<h:outputText value="Seguimiento de Saldos Anual" />
						</f:facet>
						<h:panelGrid id="pnlFormularioSaldoAnual" columns="6">
							<h:outputText value="Tipo de Perfil:" styleClass="texto"/>
							<p:selectOneMenu id="cbxTipoPerfilA" value="#{gestionSaldosController.saldoModel.tipoPerfil}">									
								<f:selectItems value="#{gestionSaldosController.comboModel.listPerfiles}" />
							</p:selectOneMenu>
							<p:spacer width="10px" height="10px"/>
							<h:outputText value="Año:" styleClass="texto"/>
							<p:selectOneMenu id="cbxAnioA" value="#{gestionSaldosController.saldoModel.anio}">
										<f:selectItems value="#{gestionSaldosController.saldoModel.listaAnio}" />
							</p:selectOneMenu>
							<p:spacer width="10px" height="10px"/>
							<h:outputText value="Tipo de Cliente:" styleClass="texto"/>
							<p:selectOneMenu id="cbxTipoClienteA"  value="#{gestionSaldosController.saldoModel.tipoCliente}">
										<f:selectItems value="#{gestionSaldosController.comboModel.listTiposCliente}" />
							</p:selectOneMenu>
							<p:spacer width="10px" height="10px"/>
			            	<p:spacer width="10px" height="10px"/>
			            	<p:spacer width="10px" height="10px"/>
			            	<p:commandButton id="idNuevoIncongruencias" icon="ui-icon-search" value="Buscar"
								 update=":formPrincipal:tabViewSaldos:pnlGrillaSaldoAnual,:formPrincipal:tabViewSaldos:graficoSaldoAnual"
            		 			 actionListener="#{gestionSaldosController.buscarSaldoAnualAction}"/>
						</h:panelGrid>
						<h:panelGrid id="pnlGrillaSaldoAnual">
						<t:div style="overflow-x: scroll; overflow-y: hidden; width: 915px;">
							<p:dataTable id="tableFormSaldosAnual"
							 			 styleClass="styleDataTableWrapNormal"
							 			 rowIndexVar="rowIndex"
										 rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'styleDataTableRowColorClaro' : 'styleDataTableRowColorOscuro'}" 
							 			 emptyMessage="NO EXISTE INFORMACIÓN SEGÚN LOS CRITERIOS DE BÚSQUEDA INGRESADOS."
										 value="#{gestionSaldosController.saldoModel.listaSaldoAnual}" 
										 var="fila">
								<p:columnGroup type="header">
										<p:row>
											<p:column headerText=""/>
											<p:column headerText="Enero"/>
											<p:column headerText="Febrero"/>
											<p:column headerText="Marzo"/>
											<p:column headerText="Abril"/>
											<p:column headerText="Mayo"/>
											<p:column headerText="Junio"/>
											<p:column headerText="Julio"/>
											<p:column headerText="Agosto"/>
											<p:column headerText="septiembre"/>
											<p:column headerText="Octubre"/>
											<p:column headerText="Noviembre"/>
											<p:column headerText="Diciembre"/>
										</p:row>
								</p:columnGroup>				 
								<p:column styleClass="columnTableVerdePrime styleAlignLeftColumn">
									<h:outputText value="#{fila.desCategoriaPorProducto}" />
								</p:column>	
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valEnero}">
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>	
								</p:column>	
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valFebrero}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valMarzo}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<f:facet name="header">
										<h:outputText value="" />
									</f:facet>
									<h:outputText value="#{fila.valAbril}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>	
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valMayo}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>	
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valJunio}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valJulio}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valAgosto}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valSetiembre}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										<f:attribute name="align" value="right"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valOctubre}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										<f:attribute name="align" value="right"/>
									</h:outputText>
								</p:column>
								<p:column styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valNoviembre}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>
								</p:column>
								<p:column width="100px" styleClass="styleAlignRightColumn">
									<h:outputText value="#{fila.valDiciembre}" >
										<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
									</h:outputText>							
								</p:column>	 
								<p:columnGroup type="footer">
										<p:row>
											<p:column footerText="Totales" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total1}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total2}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total3}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total4}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total5}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total6}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total7}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total8}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total9}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total10}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total11}" styleClass="styleDataTableFooterOrange" />
											<p:column footerText="#{gestionSaldosController.saldoModel.totalAnual.total12}" styleClass="styleDataTableFooterOrange"/>
										</p:row>	
								</p:columnGroup>			
							</p:dataTable>			 
						</t:div>
						</h:panelGrid>
					</h:panelGrid>	
					<h:panelGrid headerClass="cabeceraPanelSimple" cellspacing="0" cellpadding="5"
						styleClass="bordePanel" columns="1" width="99%" style="margin-bottom:5px">
							<f:facet name="header">
								<h:outputText value="Gráfico de Saldos" />
							</f:facet>
							<t:panelGrid id="graficoSaldoAnual" align="center" rendered="#{not empty gestionSaldosController.saldoModel.listaSaldoAnual}"  >
								<p:graphicImage value="#{gestionSaldosController.saldoModel.chartSaldoAnual}" />		  
							</t:panelGrid>
					</h:panelGrid>
				</p:tab>
				<p:tab id="tabSaldoMensual" title="Saldos Mensual">
					<h:panelGrid headerClass="cabeceraPanelSimple" cellspacing="0" cellpadding="5"
						styleClass="bordePanel" columns="1" width="99%" style="margin-bottom:5px">
						<f:facet name="header">  
							<h:outputText value="Seguimiento de Saldos Mensual" />
						</f:facet>
						<h:panelGrid id="pnlFormularioSaldoMensual" columns="7">
							<h:outputText value="Tipo de Perfil:" styleClass="texto"/>
							<p:selectOneMenu id="cbxTipoPerfilM" value="#{gestionSaldosController.saldoModel.tipoPerfilMensual}">									
								<f:selectItems value="#{gestionSaldosController.comboModel.listPerfiles}" />
							</p:selectOneMenu>
							<p:spacer width="10px" height="10px"/>
							<h:outputText value="Mes:" styleClass="texto"/>
							<p:selectOneMenu id="cbxMeslM" value="#{gestionSaldosController.saldoModel.mesMensual}">
								<f:selectItems value="#{gestionSaldosController.comboModel.listMeses}" />
							</p:selectOneMenu>
							<p:spacer width="10px" height="10px"/>
							<p:spacer width="10px" height="10px"/>
							<h:outputText value="Año:" styleClass="texto"/>
							<p:selectOneMenu id="cbxAniolM" value="#{gestionSaldosController.saldoModel.anioMensual}">
								<f:selectItems value="#{gestionSaldosController.saldoModel.listaAnio}" />
							</p:selectOneMenu>
							<p:spacer width="10px" height="10px"/>
							<h:outputText value="Tipo de Cliente:" styleClass="texto"/>
							<p:selectOneMenu id="cbxTipoClienteM" value="#{gestionSaldosController.saldoModel.tipoClienteMensual}">
								<f:selectItems value="#{gestionSaldosController.comboModel.listTiposCliente}" />
							</p:selectOneMenu>
							<p:spacer width="20px" height="10px"/>
							<p:commandButton id="idBuscarMensual" icon="ui-icon-search" value="Buscar"
								 update=":formPrincipal:tabViewSaldos:tableFormSaldosMensual,:formPrincipal:tabViewSaldos:graficoSaldoMensual"
            		 			 actionListener="#{gestionSaldosController.buscarSaldoMensualAction}"/>
						</h:panelGrid>
						<h:panelGrid id="pnlGrillaSaldoMensual" width="100%">
							<p:dataTable id="tableFormSaldosMensual" 
									 styleClass="styleDataTableWrapNormal"
						 			 rowIndexVar="rowIndex"
									 rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'styleDataTableRowColorClaro' : 'styleDataTableRowColorOscuro'}" 
						 			 emptyMessage="NO EXISTE INFORMACIÓN SEGÚN LOS CRITERIOS DE BÚSQUEDA INGRESADOS."
									 value="#{gestionSaldosController.saldoModel.listaSaldoMensual}" var="fila">
									<p:columnGroup type="header">
										<p:row>
											<p:column headerText=""/>
											<p:column id="idTextCol0" headerText="#{comboModel.listCategoriaProducto[0].abreviatura}">
												<p:tooltip for="idTextCol0" value="#{comboModel.listCategoriaProducto[0].descripcion}"/>
											</p:column>
											<p:column id="idTextCol1" headerText="#{comboModel.listCategoriaProducto[1].abreviatura}">
												<p:tooltip for="idTextCol1" value="#{comboModel.listCategoriaProducto[1].descripcion}"/>
											</p:column>
											<p:column id="idTextCol2" headerText="#{comboModel.listCategoriaProducto[2].abreviatura}">
												<p:tooltip for="idTextCol2" value="#{comboModel.listCategoriaProducto[2].descripcion}"/>
											</p:column>
											<p:column id="idTextCol3" headerText="#{comboModel.listCategoriaProducto[3].abreviatura}">
												<p:tooltip for="idTextCol3" value="#{comboModel.listCategoriaProducto[3].descripcion}"/>
											</p:column>
											<p:column id="idTextCol4" headerText="#{comboModel.listCategoriaProducto[4].abreviatura}">
												<p:tooltip for="idTextCol4" value="#{comboModel.listCategoriaProducto[4].descripcion}"/>
											</p:column>
											<p:column id="idTextCol5" headerText="#{comboModel.listCategoriaProducto[5].abreviatura}">
												<p:tooltip for="idTextCol5" value="#{comboModel.listCategoriaProducto[5].descripcion}"/>
											</p:column>
											<p:column id="idTextCol6" headerText="#{comboModel.listCategoriaProducto[6].abreviatura}">
												<p:tooltip for="idTextCol6" value="#{comboModel.listCategoriaProducto[6].descripcion}"/>
											</p:column>
											<p:column id="idTextCol7" headerText="#{comboModel.listCategoriaProducto[7].abreviatura}">
												<p:tooltip for="idTextCol7" value="#{comboModel.listCategoriaProducto[7].descripcion}"/>
											</p:column>
										</p:row>
									</p:columnGroup>
									<p:column styleClass="columnTableVerdePrime">
										<h:outputText value="#{fila.nombreCliente}" />
									</p:column>
									<p:column id="col0" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd1}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>	 
									</p:column>
									<p:column id="col1" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd2}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>		
									</p:column>
									<p:column id="col2" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd3}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>
									</p:column>
									<p:column id="col3" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd4}">
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>	
									</p:column>
									<p:column id="col4" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd5}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>	
									</p:column>
									<p:column id="col5" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd6}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>
									</p:column>
									<p:column id="col6" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd7}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>
									</p:column>
									<p:column id="col7" styleClass="styleAlignRightColumn">
										<h:outputText value="#{fila.categoriaProd8}" >
											<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}"/>
										</h:outputText>	
									</p:column>
									<p:columnGroup type="footer">
										<p:row>
											<p:column footerText="Totales" styleClass="styleDataTableFooterOrange"/>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total1}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total2}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total3}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total4}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total5}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total6}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total7}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
											<p:column styleClass="styleDataTableFooterOrange">
												<f:facet name="footer">
													<h:outputText value ="#{gestionSaldosController.saldoModel.totalMensual.total8}">
														<f:convertNumber pattern="#{bpmsgs.PATTERN_NUMERO_DECIMAL}" locale="#{bpmsgs.LOCALE}" />
													</h:outputText>
												</f:facet>
											</p:column>
										</p:row>
									</p:columnGroup>		
							</p:dataTable>	
						</h:panelGrid>
					</h:panelGrid>	
					<h:panelGrid headerClass="cabeceraPanelSimple" cellspacing="0" cellpadding="5"
						styleClass="bordePanel" columns="1" width="99%" style="margin-bottom:5px">
						<f:facet name="header">
							<h:outputText value="Gráfico de Saldos Mensual" />
						</f:facet>
						<t:panelGrid id="graficoSaldoMensual" align="center" rendered="#{not empty gestionSaldosController.saldoModel.listaSaldoMensual}">
							<p:graphicImage value="#{gestionSaldosController.saldoModel.chartSaldoMensual}" />
						</t:panelGrid>
					</h:panelGrid>
				</p:tab>
			</p:tabView>	
		</ui:define>
	</ui:composition>	
</html>